<template>
  <div>
    <div class="head">
      <van-icon name="arrow-left" @click="head()" />
      <span>知识总结</span>
    </div>
    <div class="content">
      <p>
        <button @click="fu()">点击去父组件页面</button>
      </p>
      <p>
        <span>按键修饰符---是否按下空格</span>
        <input type="text" @keydown.space="fun()" name id />
      </p>
      <p>
        <span>devServer 代理跨域</span>
      </p>
      <p>
        <span>逆向传值</span>
        <button @click="ni()">实现逆向传值</button>
      </p>
      <p>
        <span>同胞传值</span>
        <button @click="bus()">点我传值给 zia 页面</button>
      </p>
      <p>
        <span>过滤器设置省略号</span><br>
        <span>{{ name | sheng }}</span>
      </p>
      <p>
        <span>ref绑定元素，得到对应的值</span>
        <input type="text" ref="demoref" value="123456" />
        <button @click="refinp()">点击得到输入框的值</button>
      </p>
      <p>
        <span>动态组件</span>
        <button @click="chaun()">去动态组件页面</button>
      </p>
    </div>
  </div>
</template>

<script>
import eventbus from "@/eventBus"
export default {
  data() {
    return {
        zitext:"我是子组件 study 的数据",
        id:100,
        name:"虽然学习很累但是能让我看到成功的希望，我就很美。"
    };
  },
  filters:{
      sheng(val){
        return  val.length >10 ? val.substr(0,10) + ".." : val;
      }
  },
  methods: {
    head() {
      this.$router.push("/msg/liaotian/all");
    },
    fun() {
      alert("按下了空格");
    },
    refinp(){
      alert(this.$refs.demoref.value)
    },
    ni(){
        this.$router.push('/zi')
    },
    bus(){
      eventbus.$emit('study','我是 study 的数据')
      this.$router.push('/zia')
    },
    fu(){
        // params 只能使用nameparams  url只有val  不显示key 相对来说安全一些
        // this.$router.push({name:"Xz",params:{xiaoming:id}})
        this.$router.push({path: '/fu',query:{xiaozhang:this.id}})
        // replace代表替换当前界面，如果-1返回的话   会返回上一个界面
        // this.$router.replace('/konngbai')
    },
    chaun(){
      this.$router.push('/common')
    }
  }
};
</script>

<style scoped>
.head {
  display: flex;
  padding: 0.20rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.20rem;
  color: #fff;
  background: #39c0ba;
  position: sticky;
  top: 0;
  z-index: 2;
}
.head > h1 {
  text-align: center;
}
.content > p {
  margin: 0.20rem 0.20rem;
}
</style>